<template>
    <div class="orderSettingBox">
        <el-form ref="ruleFormRef" :model="orderSettingList" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
                <el-input v-model.number="orderSettingList.flashOrderOvertime" autocomplete="off">
                    <template #append>分</template>
                </el-input>
                <span>未付款，订单自动关闭</span>
            </el-form-item>
            <el-form-item label="正常订单超过：" prop="normalOrderOvertime">
                <el-input v-model.number="orderSettingList.normalOrderOvertime" autocomplete="off">
                    <template #append>分</template>
                </el-input>
                <span>未付款，订单自动关闭</span>
            </el-form-item>
            <el-form-item label="发货超过：" prop="confirmOvertime">
                <el-input v-model.number="orderSettingList.confirmOvertime" autocomplete="off">
                    <template #append>天</template>
                </el-input>
                <span>未收货，订单自动完成</span>
            </el-form-item>
            <el-form-item label="订单完成超过：" prop="finishOvertime">
                <el-input v-model.number="orderSettingList.finishOvertime" autocomplete="off">
                    <template #append>天</template>
                </el-input>
                <span>自动结束交易，不能申请售后</span>
            </el-form-item>
            <el-form-item label="订单完成超过：" prop="commentOvertime">
                <el-input v-model.number="orderSettingList.commentOvertime" autocomplete="off">
                    <template #append>天</template>
                </el-input>
                <span>自动五星好评</span>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="SubmitOrderSetting(ruleFormRef)" size="large">提交</el-button>
    </div>

</template>
<script setup lang='ts'>
import { ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
import { orderSettingListAPI, orderSettingParams } from "./api"

let orderSettingList = ref<orderSettingModel>({
    id: 0,
    flashOrderOvertime: 0,
    normalOrderOvertime: 0,
    confirmOvertime: 0,
    finishOvertime: 0,
    commentOvertime: 0
})
orderSettingListAPI().then((res) => {
    if (res.code === 200) {
        orderSettingList.value = res.data
        console.log(orderSettingList.value);
    }
})

const ruleFormRef = ref<FormInstance>()
const rules = reactive({
    flashOrderOvertime: [{ required: true, trigger: "blur", message: "时间不能为空" },
    { type: 'number', message: '请输入数字' },],
    normalOrderOvertime: [{ required: true, trigger: "blur", message: "时间不能为空" },
    { type: 'number', message: '请输入数字' },],
    confirmOvertime: [{ required: true, trigger: "blur", message: "时间不能为空" },
    { type: 'number', message: '请输入数字' },],
    finishOvertime: [{ required: true, trigger: "blur", message: "时间不能为空" },
    { type: 'number', message: '请输入数字' },],
    commentOvertime: [{ required: true, trigger: "blur", message: "时间不能为空" },
    { type: 'number', message: '请输入数字' },],
})

const SubmitOrderSetting = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            ElMessageBox.confirm("是否修改订单设置？", "订单设置", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                orderSettingParams(orderSettingList.value)
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}

</script>
<style lang="less" scoped>
.orderSettingBox {
    width: 720px;
    padding: 35px;
    margin: 20px auto 0;
    border: 1px solid #ebeef5;

    :deep(.el-form-item) {
        margin-bottom: 22px;
    }

    :deep(.el-input) {
        width: 300px;
        height: 40px;
    }

    :deep(.el-form-item__label) {
        width: 150px !important;
        font-size: 14px;
        line-height: 40px;
    }

    span {
        font-size: 14px;
        margin-left: 15px;
    }

    :deep(.el-button) {
        margin-left: 150px;
    }
}
</style>